<template>
  <div class="person">
    <h1>情况4：</h1>
    <h2>监视响应式对象的某个属性</h2>
    <button @click="changeName">更改名字:{{person.name}}</button>
    <br>
    <button @click="changeAge">更改年龄:{{person.age}}</button>
    <br>
    <button @click="changeC1">更改c1:{{person.car.c1}}</button>
    <br>
    <button @click="changeC2">更改c2:{{person.car.c2}}</button>
    <br>
    <button @click="changeCar">更改车辆全部信息:{{person.car}}</button>
    <br>
  </div>
</template>

<script lang="ts" setup>
  import {reactive,watch} from "vue";

  let person = reactive({
    name:"王二",
    age:29,
    car:{
      c1:"奔驰",
      c2:"奥迪"
    }
  })

  function changeName(){
    person.name += '-'
  }
  function changeAge(){
    person.age += 1
  }
  function changeC1(){
    person.car.c1 = "奔驰E300L"
  }
  function changeC2(){
    person.car.c2 = "奥迪A6L"
  }
  function changeCar(){
    // Object.assign(person.car,{c1:"雅迪", c2:"小刀"})   //这个是修改原地址的数据
    person.car = {c1:"雅迪", c2:"小刀"}                   //这个是换了整个的变量
  }

  //监视年龄变化
  // watch(()=>person.age,(newValue,oldValue)=>{
  //   console.log('person的年龄变化了', newValue,oldValue)
  // })

  //监视车辆信息变化
  watch(()=>person.car,(newValue,oldValue)=>{
    console.log('person的车辆变化了', newValue,oldValue)
  },{deep:true})

</script>

<style>
  .person{
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
  }
</style>
